<template>
  <div>
    <div  v-if="!item.hidden" >
      <b-menu-item v-if="item.children&&(item.children.length>1||item.children[0].children)" :icon="item.icon" :active="isActive">
        <template #label="props">
          <span class="name elip">{{ item.name }}</span>
          <b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-left'"></b-icon>
        </template>
        <sidebar-list  :menu="item.children" :is-submenu-list="true" :base-path="item.path"/>
      </b-menu-item>
      <div  v-else>
        <b-menu-item v-if="item.children&&item.children.length>0" :icon="item.children[0].icon" :tag="itemTag" :to="itemTo" :label="item.children[0].name" :active="isActive"></b-menu-item>
        <b-menu-item v-else :icon="item.icon" :tag="itemTag" :to="itemTo" :label="item.name" :active="isActive"></b-menu-item>
      </div>
    </div>
  </div>
</template>

<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
export default {
  name: "sidebarItem",
  components: {
    sidebarList: () => import('./sidebarList')
  },
  props:{
    isSubmenuList: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    },
    item: {
      type: Object,
      default: () => []
    }
  },
  computed:{
    isActive(){
      return this.$route.path===this.item.path ||  (this.$route.path.indexOf(this.item.path)>-1&& this.item.path!=='/')
    },
    itemTag () {
      return this.item.path ? 'router-link' : 'a'
    },
    itemTo () {
      return this.item.path ? this.resolvePath(this.item.path) : null
    },
  },
  methods:{
    resolvePath(routePath) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(this.basePath)) {
        return this.basePath
      }
      return path.resolve(this.basePath,this.basePath, routePath)
      // return this.basePath+''+routePath
    }
  }
}
</script>

<style scoped>

</style>
